<template>
 <div>
   <div 
   class="item"
   v-for="(item,index) in list"
   :key="index"
   >
     <div class="item-title border-bottom">
       <span class="item-title-icon"></span>
       {{item.title}}
     </div>
     <div v-if="item.children" class="item-children">
       <deatile-list :list="item.children"></deatile-list>
     </div>
   </div>
 </div>	
</template>

<script>
export default {
	name: 'DeatileList',
  props:{
    list: Array
  }
}
</script> 

<style lang="stylus" scoped>
 .item-title
   line-height:.8rem
   padding: 0 .1rem
   .item-title-icon
     position:relative
     left:.05rem
     top:.06rem
     display:inline-block
     width:.36rem
     height:.36rem
     background:url(http://s.qunarzz.com/piao/image/touch/sight/detail.png)
     margin-right:.1rem
     background-size: .4rem 3rem
  .item-children
    padding:0 .2rem   
</style>